<%--
  Created by IntelliJ IDEA.
  User: 26383
  Date: 2020/12/15
  Time: 12:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>KnowNews||后台管理登录</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript">
        function refresh() {
            loginForm.validatorImg.src = encodeURI("<%=basePath%>/admin/code.jsp?id=" + new Date());
        }
    </script>
</head>
<style type="text/css">
    html, body {
        width: 100%;
        height: 100%;
    }

    body {
        background-color: #1E9FFF;
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>

<body>
<div class="layui-card">
    <div class="layui-card-header layui-bg-cyan">管理员登录</div>
    <div class="layui-card-body">
        <form class="layui-form " action="/login" name="loginForm" method="post">
            <%--账号--%>
            <div class="layui-form-item">
                <label class="layui-form-label layui-icon  layui-icon-username"
                       style="font-size: 20px; color: #5F6FC9;">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入账号"
                           autocomplete="off" class="layui-input" oninvalid="setCustomValidity('账号不能为空！')">
                </div>
            </div>
            <%--密码--%>
            <div class="layui-form-item">
                <label class="layui-form-label layui-icon  layui-icon-key"
                       style="font-size: 20px; color: #5f6fc9;">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输密码"
                           autocomplete="off" class="layui-input" oninvalid="setCustomValidity('密码不能为空！')">
                </div>
            </div>
            <%--验证码--%>
            <div class="layui-form-item">
                <label class="layui-form-label layui-icon  layui-icon-auz"
                       style="font-size: 20px; color: #5f6fc9;">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="code" required lay-verify="required" placeholder="验证码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <%--图片--%>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <img name="validatorImg" alt="验证码" src="/admin/code.jsp" ; onclick="refresh()">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" type="submit" >登录</button>
                    <button type="reset" class="layui-btn">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>
